import React, { Component } from 'react'
import { connect } from 'react-redux'
import SwiperItem from './swiperItem'
import { EventCenter } from '@utils/Global'

class ReplaySwiper extends Component {
  clickSwiper = () => {
    EventCenter.emit('click_swiper')
  }
  renderItem() {
    var { images } = this.props.swiper
    var list = []
    images.map((item, index) => {
      list.push(
        <SwiperItem item={item} key={index} index={index}/>
      )
    })
    return list
  }
  render() {
    return (
      <div className="replay_live_swiper" onClick={this.clickSwiper}>
        { this.renderItem() }
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return Object.assign({}, {
    swiper: state.ReplayState.swiper
  })
}

export default connect(mapStateToProps)(ReplaySwiper)
